<template>
	<div class="login_page layer">
		<div class="login_page_cont">
			<div class="locale" @click="$router.push('/language')">{{$locale.find(i => i.locale == $i18n.locale)?.name}}</div>
			<!-- <img src="@/assets/images/login/topBg.png" class="bg" /> -->
			<div class="login-content-bg">
				<img class="sign-logo" src="@/assets/images/login/sign-logo.png" />
				<img class="sign-logo2" src="@/assets/images/login/sign-logo2.png" />
				<div class="title">
					{{$t('login.title')}}
				</div>
				<!-- <div class="login_type">
					<p class="but" @click="switchBut(1)" :style="loginType == 1 ? 'color:#0DF5E3' : ''">{{$t('login.phoneLogin')}}
					</p>
					<el-divider direction="vertical"></el-divider>
					<p class="but" @click="switchBut(2)" :style="loginType == 2 ? 'color:#0DF5E3' : ''">{{$t('login.emailLogin')}}
					</p>
				</div> -->
			</div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="dark-ruleForm"
				label-position="top" hide-required-asterisk>
				<el-form-item :label="$t('account')" prop="account">
					<el-input v-model="ruleForm.account" :placeholder="$t('login.accountVerify')"
						@input="(val) => ruleForm.account = val.replace(/[^A-Za-z0-9@_.]/g,'' )">
						<img src="@/assets/images/login/acc.png" slot="prefix" class="icon" />
					</el-input>
				</el-form-item>
				<!-- <el-form-item :label="loginType == 1 ? $t('phone') : $t('email')" prop="account">
					<el-input v-model="ruleForm.account"
						:placeholder="loginType == 1 ? $t('login.phoneNumber') : $t('login.email')"
						:class="loginType == 1 ? 'phone_input' :''">
						<div v-if="loginType == 1" slot="prefix" class="flex_prefix">
							<img src="@/assets/images/login/phone.png" class="icon" />
							<div class="area_code" @click="showAreaCode = !showAreaCode">
								<span>{{ruleForm.area_code}}</span>
								<i class="el-icon-caret-bottom"></i>
							</div>
						</div>
						<img src="@/assets/images/login/emil.png" slot="prefix" class="icon" v-else />
					</el-input>
				</el-form-item> -->
				<el-form-item :label="$t('password')" prop="password">
					<el-input v-model="ruleForm.password" :placeholder="$t('login.password')"
						:type="showPaw ? 'text' : 'password'">
						<img src="@/assets/images/login/paw.png" slot="prefix" class="icon" />
						<img :src="require(`@/assets/images/login/${showPaw ? 'hide' : 'show'}.png`) " slot="suffix"
							class="paw_icon" @click="showPaw = !showPaw" />
					</el-input>
				</el-form-item>
			</el-form>
			<el-button class="submit_but" @click="submit">{{$t('login.button')}}</el-button>
			<div class="forgot_link" @click="$router.push('/forgot?type=' + loginType)">
				{{$t('login.forgot')}}?
			</div>
			<div class="goReg" @click="loginType == 1 ? $router.push('/regPhone') : $router.push('/regEmail')">
				{{$t('login.noAcc')}}？<span>{{$t('login.signUpNow')}}</span>
			</div>
		</div>
		<AreaCode v-if="showAreaCode" v-model="showAreaCode" @change="(val) => ruleForm.area_code = val" />
		<EmailCode v-if="showEmailCode" v-model="showEmailCode" :ruleForm="ruleForm" />
	</div>
</template>

<script>
	import AreaCode from '@/components/areaCode.vue'
	import EmailCode from './components/emailCode.vue'
	import {
		userLogin,
		userTwoVerify
	} from '@/api/home.js'
	import {
		encrypt,
		decrypt
	} from '@/utils/crypto'
	export default {
		components: {
			AreaCode,
			EmailCode
		},
		data() {
			return {
				showPaw: false,
				showAreaCode: false,
				showEmailCode: false,
				loginType: 1,
				ruleForm: {
					area_code: '1',
					account: '',
					password: '',
				},
			}
		},
		computed: {
			rules() {
				let obj = {
					// account: [{
					// 	required: true,
					// 	message: this.loginType == 1 ? this.$t('login.phoneNumber') : this.$t('login.email'),
					// 	trigger: 'change'
					// }],
					account: [{
						required: true,
						message: this.$t('login.accountVerify'),
						trigger: 'change'
					}, 
					// {
					// 	min: 8,
					// 	max: 20,
					// 	message: this.$t('login.accountVerifyLen'),
					// 	trigger: 'blur'
					// },
					],
					password: [{
						required: true,
						message: this.$t('login.password'),
						trigger: 'change'
					}]
				}
				// if (this.loginType == 2) {
				// 	obj.account.push({
				// 		type: 'email',
				// 		message: this.$t('login.correctEmail'),
				// 		trigger: ['blur', 'change']
				// 	})
				// }
				return obj
			}
		},
		watch: {},
		mounted() {},
		methods: {
			switchBut(type) {
				this.loginType = type;
				this.$nextTick(() => {
					this.$refs.ruleForm.clearValidate(['account', 'password'])
				})
			},
			async submit() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						// 用户是否需要二次验证
						// const res = await userTwoVerify({
						// 	account: this.ruleForm.account,
						// 	area_code: this.ruleForm.area_code,
						// 	type: this.loginType,
						// })
						// // console.log('res', res);
						// if (res && res.code == 1) {
						// 	if (res.data.status == 1) {
						// 		this.showEmailCode = !this.showEmailCode
						// 	} else {
						const loginRes = await userLogin({
							// ...this.ruleForm,
							// type_N0LGHGTK: this.loginType,
							// area_code_TWiHNSiv: this.ruleForm.area_code,
							account_EK42kn86: this.ruleForm.account,
							password_TcNsrbjb: this.ruleForm.password,
							// captcha: this.captcha,
						})
						// console.log('loginRes', decrypt(loginRes.data));
						if (loginRes && loginRes.code == 1) {
							this.$store.commit('onChangeUserInfo', loginRes.data.userinfo)
							this.$router.replace('/')
							this.$toast.success(loginRes.msg)
						} else if (loginRes && loginRes.code == 2) {
							this.showEmailCode = !this.showEmailCode
							this.ruleForm = {
								...JSON.parse(decrypt(loginRes.data)),
								...this.ruleForm,
							}
						} else {
							this.$toast.fail(loginRes.msg)
						}
					}
					// } else {
					// 	this.$toast.fail(res.msg)
					// 	// console.log('this', this);
					// }
					// }
					// } else {
					// 	console.log('error submit!!');
					// 	return false;
					// }
				});
			}
		}
	}
</script>
<style lang="less" scoped>
	.login_page {
		position: relative;
		// height: 100%;
		padding-top: 15px;

		.locale {
			display: flex;
			justify-content: flex-end;
			padding: 14px 0;
		}

		.login_page_cont {

			// padding-top: 300px;
			.login-content-bg {
				height: 300px;
				background: url('~@/assets/images/login/sign-bg.png') no-repeat;
				background-size: 100% 100%;
				width: 100%;
				margin-bottom: 35px;
			}

			.sign-logo,
			.sign-logo2 {
				display: block;
				object-fit: contain;
			}

			.sign-logo {
				width: 122px;
				height: 118px;
				margin: 0 auto;
			}

			.sign-logo2 {
				width: 176px;
				height: 59px;
				margin: 17px auto 38px;
			}

			.title {
				font-size: 24px;
				margin-bottom: 20px;
				color: #fff;
			}

			.login_type {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20px;

				.but {
					font-size: 14px;
					color: #999;
				}

				.el-divider--vertical {
					margin: 0 28px;
				}
			}
		}

		.el-form {
			position: relative;
			z-index: 9;
		}

		.forgot_link {
			color: #0DF5E3;
			font-size: 14px;
			// margin-bottom: 40px;
		}

		.goReg {
			// position: fixed;
			// bottom: 20px;
			// left: 50%;
			// transform: translateX(-50%);
			// font-size: 14px;
			// color: #999;
			margin: 100px 0 20px;

			span {
				color: #0DF5E3;
			}
		}


	}
</style>